<template>
	<view class="container">
		<uv-navbar title="发布活动" bg-color="none" @leftClick="leftClick"></uv-navbar>
		<view class="issue-box">
			<view class="image-list">
				<view class="image-item" v-for="(item,index) in imageList">
					<image :src="item" mode="aspectFill"></image>
					<view class="delete" @click="onDelete(index)"><uv-icon name="close" size="20rpx"></uv-icon></view>
				</view>
				<view class="upload" v-if="imageList.length < 9">
					<view class="upload-box">
						<image class="upload-image" src="../../static/images/index/tu1.png" mode=""></image>
						<view class="upload-text">上传照片</view>
					</view>
				</view>
			</view>
			<view class="title" style="margin-top: 40rpx;">
				<uv-input placeholder="填写清晰的标题" border="none" v-model="title" maxlength="50"></uv-input>
			</view>
			<view class="textarea" style="margin-top: 40rpx;">
				<uv-textarea maxlength="500" count v-model="content" border="none"
					placeholder="描述一下活动的亮点、滑动内容、联系"></uv-textarea>
			</view>
		</view>
		<view class="button-fb" @click="onSubmit">发布新活动</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				title: '',
				content: '',
				imageList: [
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
					"https://cdn.uviewui.com/uview/album/1.jpg",
				]
			};
		},
		methods: {
			leftClick() {
				// app.navigationTo('page_account/activity/list')
				app.navigateBack()
			},
			onDelete(index) {
				this.imageList.splice(index, 1)
				// this.$set(this.imageList, index, '')
			},
			onSubmit() {
				if(this.imageList.length < 1){
					this.$toast('至少上传一张素材')
					return false
				}
				if(!this.title){
					this.$toast('请填写清晰的标题')
					return false
				}
				if(!this.content){
					this.$toast('请描述一下活动的亮点、滑动内容、联系')
					return false
				}
				console.log(this.imageList, this.title, this.content);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		overflow: hidden;
		min-height: 100vh;
		width: 100vw;
		padding: 22rpx;
		padding-top: 206rpx;
		// padding-bottom: calc(96rpx + 32rpx + 22rpx);
		box-sizing: border-box;
		background: #F7F8FA;
		background: radial-gradient(128% 128% at 95% 0%, #D7CEFF 0%, #BBE1FF 62%, #FFFFFF 95%);

		/deep/ .uv-textarea {
			padding: 0;

			.uni-textarea-placeholder {
				font-size: 26rpx;
			}
		}

		.button-fb {
			position: fixed;
			bottom: 32rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 480rpx;
			height: 96rpx;
			background: linear-gradient(180deg, #886AE6 0%, #4635FF 99%);
			border-radius: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 96rpx;
			text-align: center;
		}

		.issue-box {
			min-height: 700rpx;
			border-radius: 32rpx;
			background: #FFFFFF;
			padding: 40rpx;
			box-sizing: border-box;

			.image-list {
				display: flex;
				flex-wrap: wrap;
				width: 100%;

				.upload {
					width: calc(100% / 3 - 10rpx);
					padding-top: calc(100% / 3 - 10rpx);
					height: 0;
					position: relative;
					background: radial-gradient(116% 116% at 122% 42%, rgba(215, 206, 255, 0.3) 0%, rgba(187, 225, 255, 0.3) 63%, rgba(241, 245, 248, 0.3) 96%);
					border-radius: 32rpx;
					flex-shrink: 0;

					.upload-box {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						border-radius: 32rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
					}

					.upload-image {
						width: 80rpx;
						height: 80rpx;
						margin-bottom: 20rpx;
					}

					.upload-text {
						font-weight: 500;
						font-size: 28rpx;
						color: #000000;
						line-height: 44rpx;
						text-align: center;
					}
				}

				.image-item {
					width: calc(100% / 3 - 10rpx);
					padding-top: calc(100% / 3 - 10rpx);
					height: 0;
					flex-shrink: 0;
					position: relative;
					margin-bottom: 10rpx;
					margin-right: 10rpx;

					image {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						border-radius: 32rpx;
					}

					.delete {
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						top: 10rpx;
						right: 10rpx;
						border-radius: 50%;
						width: 32rpx;
						height: 32rpx;
						background: rgba(0, 0, 0, .2);
						z-index: 2;
					}
				}
			}
		}
	}
</style>